<template>
    <div class="small-item">
        <div class="deb-item-container">
            <el-image class="small-icon-img" :src="deb.logo" alt />
            <span class="deb-title">{{deb.deb_name}}</span>
			<el-divider></el-divider>
        </div>
    </div>
</template>

<script>
export default {
    name: "smallDebItemComponet",
    props: ["deb"],
    data() {
        return {};
    },
    methods: {
        gotoDetail(id) {}
    }
};
</script>

<style>
.small-item {
    width: 100%;
    margin: 4px;
    border-radius: 8px;
    background-color: transparent;
}

.small-item:hover {
    background-color: lightgrey;
}

.small-item .el-card__body {
    padding: 4px !important;
}
.small-item .deb-item-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr 1fr;
    background-color: transparent;
}
.small-item .deb-title{
    font-size: 0.8rem;
    justify-self: left;
}
.small-item .small-icon-img {
    height: 40px;
    width: 40px;
    /* max-height: 0%; */
    margin: 8px;
    grid-row-start: span 2;
    background-color: transparent;
}
</style>